/* * @Author: wangxi * @Date: 2023-06-10 10:31:19 * @LastEditors: Yejing * @LastEditTime: 2023-06-29 17:28:40 *
@Description: 地址管理 */
<template>
	<view class="add-address-container">
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('addAddress.newAddress')"></c-navigation-bar>
			<view class="content-box">
				<scroll-view class="input-box">
					<u-field v-model="addAddressData.receiveUserName" :label="$t('addAddress.fullname')" label-width="260"
						right-icon="man-add" :placeholder="$t('addAddress.fullname')"></u-field>

					<view class="" style="display: flex;">
						<view class="" style="    width: 140rpx;
    margin-left: 12px; text-align: left;line-height: 44px;" >
							{{$t('addAddress.mobile')}}
						</view>
						<view class="" style="width: 20%; text-align: left;line-height: 44px;" >
							<areaCode ref="areaCode" @getAreaId="asss"></areaCode>
						</view>
						<u-field type="number" :maxlength="11" v-model="mobile"  label-width="0"
							:placeholder="$t('addAddress.mobile')">
						
						</u-field>
					</view>
				
					<u-field v-model="location.country.label" :label="$t('addAddress.country')" label-width="260"
						:placeholder="$t('addAddress.country')" disabled @click="showSelectPop('country')"
						right-icon="arrow-down-fill"></u-field>
					<u-field v-model="location.city.label" :label="$t('addAddress.city')" label-width="260"
						:placeholder="$t('addAddress.city')" disabled @click="showSelectPop('city')"
						right-icon="arrow-down-fill"></u-field>

					<u-field v-model="addAddressData.address" :label="$t('addAddress.addressDetails')" label-width="260"
						:placeholder="$t('addAddress.addressDteailsHolder')" type="textarea"></u-field>
					<u-field v-model="addAddressData.postalCode" :label="$t('addAddress.postcode')" label-width="260"
						type="number" :placeholder="$t('addAddress.postcode')"></u-field>
					<!-- 	<titleInput v-model="addAddressData.receiveUserName" :title="$t('addAddress.fullname')"></titleInput>
					<titleInput v-model="addAddressData.mobile" :title="$t('addAddress.mobile')"></titleInput> -->
					<!-- <titleInput v-model="addAddressData.landmark" :title="$t('addAddress.addressOtherName')"></titleInput> -->
					<!-- 	<titleInput v-model="location.country.label" disabled :title="$t('addAddress.country')">

						<view class="slot-right-btn" slot="right-icon" @click="showSelectPop('country')">
							<u-icon class="" name="arrow-right"></u-icon>
						</view>
					</titleInput>
					<titleInput v-model="location.city.label" disabled :title="$t('addAddress.city')">
						<view class="slot-right-btn" slot="right-icon" @click="showSelectPop('city')">
							<u-icon class="" name="arrow-right"></u-icon>
						</view>
					</titleInput>


			<!-- 		<u-field v-model="location.country.label" :label="$t('addAddress.location')" label-width='260'
						right-icon="map-fill" disabled :placeholder="$t('addAddress.locationHolder')" @click="start()">
					</u-field> -->
					<!-- 	<u-field v-model="addAddressData.address" :label="$t('addAddress.addressDetails')" label-width='260'
						:placeholder="$t('addAddress.addressDteailsHolder')" type="textarea">
					</u-field>
					<u-field v-model="addAddressData.postalCode" :label="$t('addAddress.postcode')" label-width='260'
					type="number"
						:placeholder="$t('addAddress.postcode')">
					</u-field> -->

					<view class="inputBox" style="">
						<view class="" style="width: 260rpx">
							{{ $t('addAddress.SetDefaultAddress') }}
						</view>
						<u-switch v-model="addAddressData.defaultAddress" size="30"></u-switch>
					</view>
				</scroll-view>
			</view>
			<view class="btn" slot="footer">
				<button type="default" @click="keepAddress">
					<u-loading :show="isloading" size="36" mode="flower" style="margin-right: 10rpx;"></u-loading>
					{{ $t('addAddress.save') }}
				</button>
			</view>
		</c-layout>
		<u-select v-model="locationShow" mode="mutil-column-auto" label-name="areaName" value-name="areaId"
			:confirm-text="$t('system.affirm')" :cancel-text="$t('system.cancel')" :list="currentLoaction"
			@confirm="locationConfirm"></u-select>
		<u-select @confirm="confirmArea" :confirm-text="$t('system.affirm')" :cancel-text="$t('system.cancel')" v-model="showAreaCode" :list="countries" value-name="tel"
			label-name="country"></u-select>
	</view>
</template>

<script>
	import {sendMessageToUser} from '@/common/tx_im.js'
	export default {
		data() {
			return {
				isloading:false,
				mobile: '',
				countries: [],
				showAreaCode: false,
				phoneAreaNumber: 1,
				// 新增地址信息
				addAddressData: {
					address: '', //  收货人地址
					country: 0, // 国家
					countryName: '', // 国家名称
					defaultAddress: false, // 是否默认
					email: '', // 邮箱
					id: '', //
					mobile: '', // 联系电话
					postalCode: '', // 邮编
					receiveUserName: ''
				},
				// 位置数据
				location: {
					country: {},
					city: {}
				},
				rules: {
					receiveUserName: [{
						required: true,
						msg: this.$t('addAddress.nameAllTips'),
						trigger: 'blur'
					}],

					// landmark: [{
					// 	required: true,
					// 	msg: this.$t('addAddress.addressTips'),
					// 	trigger: 'blur',
					// }],

					country: [{
						required: true,
						msg: this.$t('addAddress.countyTips'),
						trigger: 'blur'
					}],
					// city: [{
					// 	required: true,
					// 	msg: this.$t('addAddress.cityTips'),
					// 	trigger: 'blur',
					// }],
					address: [{
						required: true,
						msg: this.$t('addAddress.addressDteailsTips'),
						trigger: 'blur'
					}],
					// email: [{
					// 	required: true,
					// 	msg: '该项必填！',
					// 	trigger: 'blur',
					// }],
					postalCode: [{
						required: true,
						msg: this.$t('addAddress.postCodeTips'),
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						msg: this.$t('addAddress.mobileTips'),
						trigger: 'blur'
					}]
				},
				// 地址id
				currentId: '',
				// 位置列表
				loactionList: {
					city: [],
					country: []
				},
				obj: {
					Latitude: '',
					Longitude: ''
				},
				// 当前选择器的地址key
				currentLoactionKey: 'country',
				locationShow: false
			};
		},
		onLoad(option) {
			console.log(option);
			// 判断id是否存在
			this.currentId = option.id;
			this.currentId && this.getAddressAjax(this.currentId);
			this.getAreaCode();
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			// 当前地址列表
			currentLoaction() {
				console.log(this.loactionList[this.currentLoactionKey]);
				return this.loactionList[this.currentLoactionKey];
			},
			// 因为显示问题 所以真实地址在此处计算
			realAddress() {
				this.addAddressData.mobile = this.phoneAreaNumber + '-' + this.mobile;

				return {
					...this.addAddressData,
					country: this.location.country.value,
					city: this.location.city.label || '',
					countryName: this.location.country.label || ''
				};
			}
		},
		methods: {
			//确认区号
			confirmArea(e) {
				console.log(e);
			},
			asss(e) {
				console.log(e);
				this.phoneAreaNumber = Number(e);
			},
			//获取国际区号
			getAreaCode() {
				this.$u.get('/app/user/getInternationalTelephoneAreaCode').then((res) => {
					console.log('quhao', res);
					this.countries = res.data;
				});
			},

			// 新增地址信息
			addAddressAjax() {
				if (this.mobile) {
					if (typeof this.phoneAreaNumber == 'number') {
						this.$u.post('/app/user/address/add', this.realAddress).then((res) => {
							if(res.code==200){
								this.isloading=false
							}
							this.$u.toast(res.msg);
							this.afterHandle();
						});
					} else {
						this.$u.toast(this.$t('addAddress.selectNumber'));
					}
				} else {
					this.$u.toast(this.$t('addAddress.mobileTips'));
				}
			},

			// 获取地址信息
			start() {
				uni.navigateTo({
					url: '/pages/addAddress/map?lat=' + this.obj.Latitude + '&log=' + this.obj.Longitude
				});
			},

			getAddressAjax(id) {
				this.$u
					.post('/app/user/address/page', {
						id,
						name: '',
						pageNum: 1,
						pageSize: 20,
					})
					.then((res) => {
						// 回显地址信息
						const data = res.data.records[0];
						this.addAddressData = { ...data, receiveUserName: data.userName };
						this.location = { city: { label: data.city }, country: { label: data.countryName, value: data.country } };
						this.mobile = this.addAddressData.mobile.split('-')[1]
						this.phoneAreaNumber = this.addAddressData.mobile.split('-')[0]
						this.$refs.areaCode.changeNumber(this.addAddressData.mobile.split('-')[0])
					});
			},
			updateAddress() {
				this.$u.put('/app/user/address/edit', this.realAddress).then((res) => {
					if(res.code==200){
						this.isloading=false
					}
					this.$u.toast(res.msg);
					this.afterHandle();
				});
			},
			// 后置处理
			afterHandle() {
				setTimeout(() => {
					var pages = getCurrentPages();
					var currPage = pages[pages.length - 1]; //当前页面
					var prePage = pages[pages.length - 2]; //上一个页面
					//调用上一页拉取数据的方法
					if (prePage.route == 'pages/addressManage/addressManage') {
						prePage.$vm.getAddressAjax();
					}
					if (prePage.route == 'pages/productDetails/productDetails') {}
					uni.navigateBack();
				}, 300);
			},
			keepAddress() {
				const { status } = this.publicJS.validate(this.rules, this.realAddress);
				if (status) {
				this.isloading=true
					this.currentId ? this.updateAddress() : this.addAddressAjax();
				}
			},
			// 获取位置列表
			/* 
				 level:层级 0-国家 1.. 2.. 3..
				 areaId:上一层的id =
				 */
			getLoactionListAjax(level, key, areaId) {
				this.$u
					.post('/app/shop/address', {
						level,
						areaId
					})
					.then((res) => {
						if (!res.data.length && level == '1') {
							this.$u.toast(this.$t('addAddress.countyEeore'));
							this.locationShow = false;
						} else {
							this.locationShow = true;
						}
						this.loactionList[key] = res.data;
					});
			},
			// 打开选择弹出层
			showSelectPop(key) {
				this.currentLoactionKey = key;
				// 判断是国家还是地区
				if (key === 'country') {
					this.getLoactionListAjax('0', key);
				} else {
					if (this.location.country.value) {
						this.getLoactionListAjax('1', key, this.location.country.value);
					} else {
						this.$u.toast(this.$t('addAddress.countyTips'));
						return;
					}
				}
			},
			// 地址确认
			locationConfirm(data) {
				data = data[0];
				//说明不是第一次选择国家  并且新选择的国家 不等于 已经储存的国家
				if (this.currentLoactionKey === 'country' && this.location.country.value !== data.value) {
					this.location.city = {};
				}
				this.location[this.currentLoactionKey] = data;
				this.locationShow = false;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.add-address-container {
		height: 100vh;
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;

		.nav-search {
			/deep/ .switch-svg {
				position: relative;

				.search-text {
					position: absolute;
				}
			}
		}

		.content-box {
			height: 100%;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;

			.inputBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e8e6ea;
				font-size: 14px;
				height: 88rpx;
				padding: 10px 14px;
				text-align: left;
				position: relative;
				color: #303133;
			}

			/deep/ .title-input {
				margin-top: 10rpx;
				margin-bottom: 30rpx;

				.right-icon {
					height: 100%;
				}
			}

			.slot-right-btn {
				font-size: 50rpx;
				height: 100%;
				display: flex;
				align-items: center;
			}

			.input-item {
				display: block;

				// margin-bottom: 32rpx;
				.title-input {
					width: 100%;
				}

				&::after {
					border-bottom: none;
				}
			}

			/deep/ .u-form-item__message {
				padding-left: 10rpx !important;
			}

			button {
				height: 120rpx;
				// width: calc(100%);
				background-color: #2934d0;
				color: #fff;
			}
		}

		.btn {
			background-color: #fff;
			padding: 20rpx 30rpx;
		}
	}
</style>